Skip to content

Enhance hover effects for Features section#317

Merged
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
DineshSivalanka:dinesh
May 20, 2026
Merged

Enhance hover effects for Features section#317
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
DineshSivalanka:dinesh

Conversation

@DineshSivalanka
Copy link
Copy Markdown
Contributor

@DineshSivalanka DineshSivalanka commented May 18, 2026

Related Issue

Closes #288

Description

Enhanced hover effects for feature cards in both dark and light mode.

Improvements

  • Added smoother scaling animations
  • Improved hover shadows
  • Added icon hover animation
  • Enhanced dark mode interaction effects
  • Improved overall UI responsiveness

Type of Change

  • UI Enhancement
  • Feature Improvement

How Has This Been Tested?

  • Tested locally using npm run dev
  • Verified hover animations in dark and light mode
  • Checked responsiveness across screen sizes
  • Verified no build errors

Summary by CodeRabbit

Release Notes

  • New Features

    • Added rate limiting to API endpoints
    • Integrated security headers middleware
    • Improved CORS configuration with frontend URL whitelist
  • Bug Fixes

    • Added fallback backend URLs for authentication flows
  • Style

    • Enhanced feature card hover animations with improved lift and scale effects

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 18, 2026

Deploy Preview for github-spy failed.

Name Link
🔨 Latest commit e9558bb
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a0de0bf801f270008883dea

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 18, 2026

Warning

Rate limit exceeded

@DineshSivalanka has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 37 minutes and 40 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 55c9a5bb-5952-48a7-b4ff-a1d3cdc9f50d

📥 Commits

Reviewing files that changed from the base of the PR and between 938d321 and 3cf7652.

📒 Files selected for processing (1)
  • backend/server.js
📝 Walkthrough

Walkthrough

Backend: adds helmet, express-rate-limit, env-driven CORS/credentials, session defaults, and starts server after DB connect; updates sample env with CLIENT_URL. Frontend: strengthens feature-card hover styling and adds localhost fallback for backend URL in Login/Signup.

Changes

Backend security and configuration

Layer / File(s) Summary
Add security dependencies and bump cors
backend/package.json
Adds express-rate-limit and helmet, and bumps cors to ^2.8.6.
CORS, helmet, rate limiter, and session adjustments
backend/server.js
Replaces wildcard CORS with env-whitelisted origins (allows no-origin), enables credentials, adds helmet(), applies /api rate limiting, and derives sessionSecret from SESSION_SECRET with warning fallback; cookie secure tied to production.
DB connection and port defaulting
backend/server.js
Adds defaults and warnings for PORT and MONGO_URI, connects to MongoDB using MONGO_URI, and starts app.listen(PORT) only after successful DB connection.
Add CLIENT_URL to .env sample
backend/.env.sample
Adds CLIENT_URL=https://your-frontend-domain.com and preserves a commented localhost example.

Frontend UI tweaks and backend URL fallbacks

Layer / File(s) Summary
Feature card hover transform and blur
src/components/Features.tsx
Increases hover lift from hover:-translate-y-2 to hover:-translate-y-3, changes scale to hover:scale-105, and adds backdrop-blur-sm.
Login/Signup backend URL fallbacks
src/pages/Login/Login.tsx, src/pages/Signup/Signup.tsx
Provides http://localhost:5000 fallback when VITE_BACKEND_URL is unset for backendUrl used in auth requests.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 I hopped through code with careful paws,
Helmet and limits kept out claws,
Cards now lift and shimmer clear,
And localhost whispers, “I am here.” ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 4

❌ Failed checks (3 warnings, 1 inconclusive)

Check name Status Explanation Resolution
Title check ⚠️ Warning The title focuses only on the Features.tsx hover effects change, but the PR includes significant backend security enhancements (CORS, helmet, rate-limiting, environment configuration) that are unrelated to the title's scope. Update the title to reflect all major changes, such as 'Enhance hover effects and add backend security middleware' or split into multiple focused PRs.
Description check ⚠️ Warning The PR description focuses exclusively on UI/UX enhancements and hover effects but omits the substantial backend security and configuration changes (CORS, helmet, rate-limiting, SESSION_SECRET, MongoDB configuration). Add a Backend Changes section documenting the security middleware additions, environment configuration changes, and their purpose in the CORS, rate-limiting, and session security implementations.
Out of Scope Changes check ⚠️ Warning Multiple backend changes (CORS whitelist, helmet middleware, rate-limiting, SESSION_SECRET, MongoDB configuration defaults) are out of scope relative to issue #288, which specifically requests UI hover effects for the Features section. Move backend security and configuration changes to a separate PR, or update the linked issue to include these backend objectives and update the PR description accordingly.
Linked Issues check ❓ Inconclusive The PR partially addresses issue #288 (hover effects for Features section) but also includes unrelated backend security enhancements not mentioned in the linked issue's objectives. Clarify whether backend security changes are part of issue #288 scope or if they should be in a separate PR; ensure all changes align with the issue's stated objectives.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@backend/server.js`:
- Around line 67-72: The current code silently defaults MONGO_URI to localhost;
change the startup logic so you only allow the localhost fallback when
process.env.NODE_ENV === 'development' and otherwise fail fast: first check
process.env.MONGO_URI and if missing and NODE_ENV !== 'development' log an error
via console.error (or processLogger) and exit (process.exit(1)); if NODE_ENV ===
'development' continue but emit a clear warning. Move the MONGO_URI assignment
(the constant MONGO_URI and any warning) to occur after this validation so the
app never silently connects to localhost in non-dev environments.
- Around line 44-49: The code currently falls back to a hard-coded sessionSecret
which is unsafe; replace the permissive fallback with a strict guard: require
process.env.SESSION_SECRET to be set unless NODE_ENV === 'development' (or a
similar explicit dev flag), log a clear error via console.error when missing and
call process.exit(1) to abort startup, and only then set sessionSecret from
process.env.SESSION_SECRET and pass it into app.use(session({ secret:
sessionSecret, ... })); reference the existing symbols sessionSecret,
process.env.SESSION_SECRET, NODE_ENV, and app.use(session(...)) when making the
change.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: da81b258-2e50-4d49-b2e1-8f5d9ac2b70e

📥 Commits

Reviewing files that changed from the base of the PR and between 5f035b2 and 938d321.

📒 Files selected for processing (5)
  • backend/.env.sample
  • backend/package.json
  • backend/server.js
  • src/pages/Login/Login.tsx
  • src/pages/Signup/Signup.tsx
✅ Files skipped from review due to trivial changes (2)
  • src/pages/Signup/Signup.tsx
  • src/pages/Login/Login.tsx

Comment thread backend/server.js Outdated
Comment on lines +44 to +49
const sessionSecret = process.env.SESSION_SECRET || 'dev-secret';
if (!process.env.SESSION_SECRET) {
console.warn('Warning: SESSION_SECRET is not set. Using a fallback development secret. Set SESSION_SECRET in backend/.env for production.');
}
app.use(session({
secret: process.env.SESSION_SECRET,
secret: sessionSecret,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Fail fast when SESSION_SECRET is missing outside local development.

The hard-coded fallback makes session signing predictable whenever deployment config is wrong, which quietly weakens auth/session integrity in production. Keep the fallback strictly dev-only and abort startup otherwise.

🔐 Suggested guard
-const sessionSecret = process.env.SESSION_SECRET || 'dev-secret';
-if (!process.env.SESSION_SECRET) {
-  console.warn('Warning: SESSION_SECRET is not set. Using a fallback development secret. Set SESSION_SECRET in backend/.env for production.');
-}
+const isProduction = process.env.NODE_ENV === 'production';
+if (!process.env.SESSION_SECRET && isProduction) {
+  throw new Error('SESSION_SECRET must be set in production');
+}
+
+const sessionSecret = process.env.SESSION_SECRET || 'dev-secret';
+if (!process.env.SESSION_SECRET) {
+  console.warn('Warning: SESSION_SECRET is not set. Using a fallback development secret.');
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const sessionSecret = process.env.SESSION_SECRET || 'dev-secret';
if (!process.env.SESSION_SECRET) {
console.warn('Warning: SESSION_SECRET is not set. Using a fallback development secret. Set SESSION_SECRET in backend/.env for production.');
}
app.use(session({
secret: process.env.SESSION_SECRET,
secret: sessionSecret,
const isProduction = process.env.NODE_ENV === 'production';
if (!process.env.SESSION_SECRET && isProduction) {
throw new Error('SESSION_SECRET must be set in production');
}
const sessionSecret = process.env.SESSION_SECRET || 'dev-secret';
if (!process.env.SESSION_SECRET) {
console.warn('Warning: SESSION_SECRET is not set. Using a fallback development secret.');
}
app.use(session({
secret: sessionSecret,
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@backend/server.js` around lines 44 - 49, The code currently falls back to a
hard-coded sessionSecret which is unsafe; replace the permissive fallback with a
strict guard: require process.env.SESSION_SECRET to be set unless NODE_ENV ===
'development' (or a similar explicit dev flag), log a clear error via
console.error when missing and call process.exit(1) to abort startup, and only
then set sessionSecret from process.env.SESSION_SECRET and pass it into
app.use(session({ secret: sessionSecret, ... })); reference the existing symbols
sessionSecret, process.env.SESSION_SECRET, NODE_ENV, and app.use(session(...))
when making the change.

Comment thread backend/server.js Outdated
Comment on lines +67 to +72
const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/githubTracker';

if (!process.env.MONGO_URI) {
console.warn('Warning: process.env.MONGO_URI is not set. Using local default:', MONGO_URI);
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Avoid silently defaulting MONGO_URI to localhost in non-dev environments.

If the env var is missing, this can start the app against the wrong database or hide a broken deployment until data looks inconsistent. Limit the localhost fallback to development and fail startup elsewhere.

🗄️ Suggested guard
 const PORT = process.env.PORT || 5000;
-const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/githubTracker';
+const isProduction = process.env.NODE_ENV === 'production';
+if (!process.env.MONGO_URI && isProduction) {
+  throw new Error('MONGO_URI must be set in production');
+}
+const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/githubTracker';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const PORT = process.env.PORT || 5000;
const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/githubTracker';
if (!process.env.MONGO_URI) {
console.warn('Warning: process.env.MONGO_URI is not set. Using local default:', MONGO_URI);
}
const PORT = process.env.PORT || 5000;
const isProduction = process.env.NODE_ENV === 'production';
if (!process.env.MONGO_URI && isProduction) {
throw new Error('MONGO_URI must be set in production');
}
const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/githubTracker';
if (!process.env.MONGO_URI) {
console.warn('Warning: process.env.MONGO_URI is not set. Using local default:', MONGO_URI);
}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@backend/server.js` around lines 67 - 72, The current code silently defaults
MONGO_URI to localhost; change the startup logic so you only allow the localhost
fallback when process.env.NODE_ENV === 'development' and otherwise fail fast:
first check process.env.MONGO_URI and if missing and NODE_ENV !== 'development'
log an error via console.error (or processLogger) and exit (process.exit(1)); if
NODE_ENV === 'development' continue but emit a clear warning. Move the MONGO_URI
assignment (the constant MONGO_URI and any warning) to occur after this
validation so the app never silently connects to localhost in non-dev
environments.

@mehul-m-prajapati mehul-m-prajapati merged commit a3688a9 into GitMetricsLab:main May 20, 2026
1 of 6 checks passed
@github-actions
Copy link
Copy Markdown

🎉🎉 Thank you for your contribution! Your PR #317 has been merged! 🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Add hover effects to Features section for dark and light mode

2 participants